<template>
	<view class="pr w-max h-max flex-col ">
		<image src="/static/img/order/bg.png" class="w-max pa top0 left0" mode="widthFix"></image>
		<u-navbar :is-back="false" :border-bottom="false" title="我的订单" title-bold :is-fixed="false"
			:background="{background:'#0000'}">
		</u-navbar>
		<u-tabs-swiper :activeColor="$zs" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false"
			swiperWidth="750" bgColor="#0000"></u-tabs-swiper>
		<swiper class="flex1" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="h-max" v-for="(item9,index9) in orderList" :key='index9'>
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="p20">

						<orderList :list="item9" />
					</view>
					<u-loadmore :status="loadStatus[index9]" bgColor="#fefefe00" @loadmore="reachBottom" />
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- <tabbar /> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{ //状态：1待接单，2待服务，3进行中，4待评价，5已完成，6已取消
						name: '全部',
						id: -1
					},
					// {
					// 	name: '待付款',
					// 	id: 0
					// },
					{
						name: '待接单',
						id: 1
					},
					{
						name: '待服务',
						id: 2
					},
					{
						name: '进行中',
						id: 3
					},
					{
						name: '待评价',
						id: 4
					},
					{
						name: '已完成',
						id: 5
					}, {
						name: '已取消',
						id: 6
					}
				],
				orderList: [], //页面所有数据
				current: 0, //tabbar index
				swiperCurrent: 0, //页面 index
				page: 1, //页面 page
				loadStatus: [],
				statisList: [],
			};
		},
		watch: {
			keyword() {
				this.$u.debounce(this.getOrderList, 500)
			},
		},
		onLoad(e) {
			//准备数据
			let length = this.list.length
			this.orderList = Array(length).fill([])
			this.loadStatus = Array(length).fill('loadmore')
			//准备数据end
			if (e.id) {
				let index = this.list.findIndex(it => it.id == e.id)
				if (index != -1) this.current = index, this.swiperCurrent = index
			}
		},
		onShow() {
			this.getOrderList();
			let index = this.$getData('orderList')
			if ((index ?? '') !== '') {
				console.log(index);
				this.swiperCurrent = index * 1
				this.$setCache('orderList', '')
			}
		},
		methods: {
			// //order/cancelOrder
			// cancelOrder() {
			// 	this.$setCache('cancelOrder', true)
			// 	this.$jump('')
			// 	this.goOrderDetails()
			// },
			// goOrderDetails(){

			// },
			goOrderD(item, val) {
				let params = {
					id: item.id,
					...val
				}
				if (this.$params.isShop) {
					params = {
						order_id: item.id,
						isShop: this.$params.isShop,
						...val
					}
				}
				this.$jump('/pages/order/orderDetail', params)
			},
			// 页面数据
			getOrderList(e) {
				let cIndex = JSON.parse(JSON.stringify(this.swiperCurrent)) //页面请求时的index
				e == "down" ? this.page++ : this.page = 1
				let form = {
					status: this.list[cIndex].id,
					page: this.page,
					keyword: this.keyword
				}
				this.loadStatus.splice(cIndex, 1, "loading")
				let api = '/master/order/lists' //订单列表接口
				this.$request(api, form).then(res => {
					let list = res.data.data
					if (e == "down") {
						this.orderList[cIndex].push(...list)
					} else {
						this.orderList[cIndex] = list
					}
					this.loadStatus.splice(cIndex, 1, "loadmore")
				})
			},
			cancelOrder(id) {
				this.$showModal('删除').then(res => {
					this.$request('/api/wanlshop.order/cancelOrder', {
						id
					}).then(res => {
						this.$msg(res.msg)
						this.getOrderList()
					})
				})
			},
			confirmOrder(id) {
				this.$showModal('收货').then(res => {
					this.$request('/api/wanlshop.order/confirmOrder', {
						id
					}).then(res => {
						this.$msg(res.msg)
						this.getOrderList()
					})
				})
			},
			editOrderAddress(id) {
				uni.$once('setAdd', data => {
					this.$request('/api/wanlshop.order/editOrderAddress', {
						id,
						address_id: data.id
					}).then(res => {
						this.$msg(res.msg)
						this.getOrderList()
					})
				})
				this.$jump('/pages/my/address/list', {
					type: 'order'
				})
			},


			reachBottom() {
				// 下拉
				this.loadStatus.splice(this.swiperCurrent, 1, "loading")
				this.getOrderList('down');
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
			},
			//滑动事件
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			//滑动结束事件
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				if (this.current != current) {
					this.current = current;
					this.getOrderList();
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #FFF;
	}

	.my_box_shadow {
		box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.07);
	}
</style>